<template>
   <div style="width: 100%">
        <div style="display: flex; width: 100%">
            <el-input :model-value="id" @dblclick="showform" :readonly="formdatabase.isreadonly" @input="handleChange('id', $event)" />
            <el-tooltip :content="formdatabase.name" placement="top">
                <el-input :model-value="name" disabled @click="showform" />
            </el-tooltip>
        </div>
    </div>
    <el-dialog v-model="channelStore.showform" :title="$t('组织机构')" width="500" :before-close="onclose" draggable>
        <channel :isformmodel="Boolean(true)" :isreadonly="Boolean(true)" />
        <template #footer>  
            <div class="dialog-footer">
                <el-button @click="cancel()">{{$t('取消')}}</el-button>
                <el-button type="primary" @click="hadselect()"> {{$t('确定')}} </el-button>
            </div>
        </template>
    </el-dialog>
</template>
<script lang="ts" setup>
import { watch } from 'vue';
import { useI18n } from 'vue-i18n';
import channel from '@/components/share/channel.vue';
//@ts-ignore
import { usechannelStore } from '@/store';

const channelStore = usechannelStore() as any;

interface FormDatabaseProps {
  isreadonly?: boolean;
  id?: string;
  name?: string;
}
const formdatabase = withDefaults(defineProps<FormDatabaseProps>(), {
  isreadonly: false,
  id: '',
  name: ''
});
//监听计算属性的变化以更新本地状态
watch(
    () => channelStore.isselect,
    (newData) => {
        if(newData){
            hadselect();
        }else{
            cancel();
        }
    }
);
const showform = () => {
    channelStore.setshowform(true);
};
// 定义 emits 的事件
const emit = defineEmits<{
  (event: 'updatechannel', dept: any): void;
  (event: 'update:name', value: string): void;
  (event: 'update:id', value: string): void;
}>();
//选择
const hadselect = () => {
    channelStore.setselect(false);
    channelStore.setshowform(false);
    emit('update:id', channelStore.channelid);
    emit('update:name', channelStore.name);
    emit('updatechannel', { channelid: channelStore.channelid, channelnm: channelStore.name });
};

//取消选择
const cancel=()=>{
    channelStore.setselect(false);
    channelStore.setshowform(false);
}
const onclose=()=>{
    if(channelStore.isselect){
        hadselect();
    }else{
        cancel();
    }
}
const handleChange = (type, e) => {
    if (type == 'id') {
        emit('update:id', e);
    } else if (type == 'name') {
        emit('update:name', e);
    }
};
</script>
<style scoped></style>
